<!DOCTYPE HTML>
<meta charset="utf8">
<style>
    .testTextRun {
        font-size: 50px;
    }
    #highlightContainer text {
        font-size: 10px;
    }
</style>
<svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="path" d="M 25 400 C 300 400 200 200 500 450"/>
    </defs>
    <g id="highlightContainer"/>

    <text x="25" y="50" class="testTextRun" font-family="cursive">öh &#x443;&#x030c;eah! fi ffi abcffidef</text>
    <text x="25" y="150" class="testTextRun" font-family="serif">öh &#x443;&#x030c;eah! fi ffi abcffidef</text>
    <text x="25" y="250" class="testTextRun" font-family="sans-serif">öh &#x443;&#x030c;eah! fi ffi abcffidef</text>
    <use xlink:href="#path" stroke-width="2" stroke="black" fill="transparent"/>
    <text x="25" y="350" class="testTextRun" font-family="cursive">
        <textPath xlink:href="#path">ffiffiffiffiffiffiffiffiffiffiffi</textPath>
    </text>
</svg>
<script src="resources/highlightGlyphs.js"></script>
<script>
    highlightGlyphs(document.querySelectorAll('.testTextRun'), highlightContainer);
</script>

